<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>啄木鸟管理平台</title>
    <th:block th:replace="common/common :: jscss"/><!-- 日期插件 -->
    <style>
        /* Border styles */
        table {
            border-collapse: collapse;
            width: 100%
        }

        /* Padding and font style */
        table td, table th {
            border-collapse: collapse;
            height: 34px;
            font-size: 12px;
            font-family: Verdana;
            color: #333;
            background-color: #fff
        }

        .btn {
            position: relative;
            display: inline-block;
            margin: 0;
            padding: 5px 10px;
            width: 90px;
            text-align: center;
            border: 1px solid #E2E2E2;
            border-radius: 0;
            background: #F8F8F8;
            background-image: none !important;
            box-shadow: none !important;
            color: #4C4C4C;
            vertical-align: middle;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
            -webkit-transition: all ease .15s;
            transition: all ease .15s;
        }

        .table-box {
            padding: 0 30px;
        }

        .holiday {
            color: #f00;
            display: block;
            text-align: center;
        }

        .title-top {
            margin: 0 25px;
            font-size: 20px;
            text-align: center;
            padding: 10px 0;
            border-bottom: 1px solid #ddd
        }

        .date-table td {
            border-bottom: 1px solid #eee;
            width: 14.28%;
            text-align: center;
            vertical-align: top;
        }

        .date-table td.disabled {
            color: #bbb
        }

        .date-table td:nth-child(6), .date-table td:nth-child(7) {
            color: #ffc642
        }

        .date-table td .date {
            display: inline-block;
            width: 65px;
            line-height: 56px;
            text-align: center;
            cursor: pointer
        }

        .date-table td.disabled .date {
            cursor: not-allowed;
        }

        .date-table td.selected .date {
            color: #fff;
            background-color: #409eff;
        }

        .date-table thead td {
            vertical-align: middle;
            padding: 6px 0;
            height: 34px;
        }

        .tip-status-row {
            padding: 20px 10px 10px;
            font-size: 14px;
            text-align: center;
            border-top: 1px solid #ddd;
            margin-top: -1px
        }

        .tip-status-row .status-span {
            display: inline-block;
            margin-right: 30px;
            position: relative;
            padding-left: 22px;
        }

        .tip-status-row .status-span:after {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 3px;
            left: 0;
            border: 1px solid #ddd
        }

        .tip-status-row .blue-status:after {
            background-color: #409eff;
            border-color: #409eff;
        }

        .tip-status-row .grey-status:after {
            background-color: #eee;
            border-color: #eee
        }

        .btn-box {
            padding: 20px 0;
            border-top: 1px solid #eee;
            margin-top: 20px;
            text-align: center;
        }

    </style>
</head>

<body>
<div class="layui-row">
    <div class="layui-card" style="padding-bottom: 25px;">
        <div class="layui-card-body">
            <div id="dutytime-picker">
                <form method="post" action="" class="layui-form" lay-filter="zmn-form" >
                    <input type="hidden" name="data" th:value="${data}">
                    <div class="table-box">
                        <table class="table date-table">
                            <thead>
                            <tr>
                                <td>周一</td>
                                <td>周二</td>
                                <td>周三</td>
                                <td>周四</td>
                                <td>周五</td>
                                <td>周六</td>
                                <td>周日</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="dateList:${items}">
                                <td th:each="item:${dateList}">
                                    <input type="checkbox" name="days"
                                           th:if="${item != null}"
                                           th:value="${#temporals.format(item, 'yyyy-MM-dd')}"
                                           th:title="${#temporals.format(item, 'MM月dd日')}"
                                           th:checked="${#lists.contains(closeDays, item)}"
                                           th:disabled="${#lists.contains(closeDays, item)}">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="btn-box">
                        <button class="layui-btn" lay-submit="" lay-filter="zmn-form-submit">保存</button>
                        <button class="layui-btn layui-btn-primary" onclick="zmnLayUtil.closeThisIframe(parent)">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" th:inline="javascript">

    var json = {
        submitURL: [[${submitURL}]],
        bId: [[${bId}]],
        storeageCategKey: [[${storeageCategKey}]],
    };

    layui.config({
        base: "/static/lay/"
    }).extend({
        index: "lib/index"
    }).use(['index', 'form'], function(){
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;

        // 提交
        form.on('submit(zmn-form-submit)', function(obj){
            var data = obj.field;

            //获取checkbox[name='days']的值
            var days = new Array();
            $("input:checkbox[name='days']:checked:not(:disabled)").each(function(i){
                days[i] = $(this).val();
            });
            data.days = days;//将数组合并成字符串
            data.data = JSON.parse(data.data);
            if(json.storeageCategKey){
                data.data.categorys = JSON.parse(sessionStorage.getItem(json.storeageCategKey));
                console.log('get storeageCategKey:'+json.storeageCategKey);
                console.log('get value:'+JSON.stringify(data.data.categorys));
            }
            var url = json.submitURL;
            $.ajax({
                async: false,
                type: "POST", url: url,
                contentType: "application/json", dataType: "json", data: JSON.stringify(data),
                success:function(resp) {
                    if(resp.status == 200) {
                        zmnPage.reload('操作成功!', 1000);
                    }else{
                        layer.msg(resp.message,{icon: 2});
                    }
                },
                error:function(XMLHttpRequest, status, errorThrown){}
            });
            return false;
        });
    });
</script>

</body>
</html>